<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增图片')" />
    <th:block th:include="include :: select2-css" />
</head>
<body>
<div class="main-content">
    <form id="form-user-add" class="form-horizontal">
        <input name="deptId" type="hidden" id="treeId"/>
        <h4 class="form-header h4">图片信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">图片名称：</label>
                    <div class="col-sm-8">
                        <input name="imgName" id="imgName" placeholder="请输图片名称" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">图片地址：</label>
                    <div class="col-sm-8">
                        <input name="imgUrl" id="imgUrl" placeholder="请输入图片地址" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">上传图片：</label>
                    <div class="col-sm-8">
                        <div class="new-contentarea tc" style="margin-top: 5px">
                            <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
                            <input type="file" name="avatar" id="inputImage" accept="image/*" style="display: none"/>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script>
    var file;
    $("#inputImage").change(function(e) {
        file = e.target.files[0]
    })


    function submitHandler() {
        var formdata= new FormData();
        formdata.append("img",file);
        formdata.append("imgName",$("#imgName").val());
        formdata.append("imgUrl",$("#imgUrl").val());
        $.ajax({
            url:"/system/img/addImg",
            method:"post",
            dataType:"json",
            processData: false,
            contentType: false,
            data:formdata,
            success:function(res){
                // 上传成功
                layer.msg("图片上传成功",{time:1000})
            },
            error:function(res){
            // 上传失败
                layer.msg("图片上传失败:error:"+res.data.toString(),{time:1000})
            }
        })
    }





</script>
</body>
</html>